<script setup lang="ts">
import { ref } from 'vue'
const isOpen = ref(false)
const open = (ev: any) => {
  ev.currentTarget.classList.toggle('open')
}
</script>

<template>
  <main class="main-wrap flex-v-ec" v-hl>
    <div class="container">
      <section class="tab_bar flex-h-sbc">
        <div class="tab flex-h-cc">
          <i class="iconfont2 icon-home"></i>
        </div>
        <div class="tab flex-h-cc">
          <i class="iconfont2 icon-category"></i>
        </div>
        <div class="tab middle flex-h-cc" :class="{ open: isOpen }" @click="open">
          <div style="--angle: -45deg" class="add flex-h-cc"><i class="iconfont2 icon-photo"></i></div>
          <div style="--angle: 0deg" class="add flex-h-cc"><i class="iconfont2 icon-doc"></i></div>
          <div style="--angle: 45deg" class="add flex-h-cc"><i class="iconfont2 icon-video"></i></div>
        </div>
        <div class="tab flex-h-cc">
          <i class="iconfont2 icon-cart"></i>
        </div>
        <div class="tab flex-h-cc">
          <i class="iconfont2 icon-my"></i>
        </div>
      </section>
    </div>
  </main>
</template>

<style scoped lang="scss">
.main-wrap {
  @include size(100%, 100%);
  padding: 24px;
  overflow-y: auto;
  background: #f1f9f9;
  .tab_bar {
    @include size(500px, 100px);
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(114, 114, 114, 0.5);
    .tab {
      @include size(100px, 100px);
      & > i {
        font-size: 30px;
        color: #686868;
      }
      &:hover > i {
        color: #f97f51;
      }
      &.middle {
        position: relative;
        background-color: #0984e3;
        border-radius: 50%;
        border: 10px solid #e5e5e5;
        transform: translateY(-50%);
        transition: 0.3s;
        &::after,
        &::before {
          @include size(50%, 3px);
          position: absolute;
          content: '';
          border-radius: 3px;
          background-color: #fff;
          transition: 0.3s;
        }
        &::before {
          transform: rotate(90deg);
        }
      }
      .add {
        @include size(60px, 60px);
        position: absolute;
        border-radius: 50%;
        background-color: #fff;
        transition: 0.3s;
        opacity: 0;
        box-shadow: 0 0 20px rgba(114, 114, 114, 0.5);
        & > i {
          font-size: 24px;
          color: #686868;
          transition: 0.3s;
        }
        &:hover {
          background-color: #f97f51;
          & > i {
            color: #fff;
          }
        }
      }
      &.open {
        background-color: #f97f51;
        &::after {
          transform: rotate(135deg);
        }
        &::before {
          transform: rotate(225deg);
        }
        .add {
          opacity: 1;
          transform: rotate(var(--angle)) translateY(-100px);
          & > i {
            transform: rotate(calc(0deg - var(--angle)));
          }
        }
      }
    }
  }
}
</style>
